<script setup>
    import {counterStore} from "../stores/counterStore";
    const counter=counterStore();
    counter.activeIndex=3;

//一、查看按钮
    import { ReportViolationPageStore } from "../stores/ReportViolationPageStore";
    const store=ReportViolationPageStore();
    const Check = (item) => {
        const list={
            content:item.content,
            date:item.date,
            status:item.status,
        }
        //更新到userStore中的list
        store.open(list);
    };

//二、对话框
    import { ref } from 'vue';
    const dialogVisible = ref(false);
    const title=ref("");
    const content=ref("");
    const name=ref("");
    const tel=ref("");
    // 临时保存的数据
    const savedData = ref(null);

    //去投诉按钮
    const makeComplaint = () => {
        dialogVisible.value = true;
    };

    //取消按钮
    const cancel = () => {
        if (savedData.value) {
            title.value = savedData.value.title;
            content.value = savedData.value.content;
            name.value = savedData.value.name;
            tel.value = savedData.value.tel;
        }else{
            title.value = "";
            content.value = "";
            name.value = "";
            tel.value = "";
        }
        dialogVisible.value = false;
    }

    //保存按钮
    import { ElMessage } from 'element-plus';
    const saveComplaint = () => {
        savedData.value = {
            title: title.value,
            content: content.value,
            name: name.value,
            tel: tel.value,
        };
        ElMessage.success('保存成功');
    }

    //提交按钮
    const onSubmit=()=>{
        // 添加表单验证逻辑
        if (!title.value || !content.value || !name.value || !tel.value) {
            ElMessage.error('请填写所有必填字段');
            return;
        }  

        //将提交数据保存到列表中
        const maxId = Math.max(...articleList.value.map(item => parseInt(item.id)));// 生成新条目的ID（基于现有最大ID+1）
        const newId = (maxId + 1).toString().padStart(2, '0');
        
        // 创建新条目
        const newItem = {
            id: newId,
            content: title.value,  // 使用标题作为内容
            date: new Date().toISOString().split('T')[0], // 当前日期
            status: '正在处理中',
            operation: '查看'
        };

        // 添加到列表开头
        articleList.value.push(newItem);
        
        // 提交后清空临时数据
        savedData.value = null; 
        title.value = "";
        content.value = "";
        name.value = "";
        tel.value = "";
        
        ElMessage.success('提交成功');
        dialogVisible.value = false;
    }

//三、列表数据
    const articleList = ref([
        {id:'01',content:'【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'02',content:'【麻城市中心】麻城市农村公路管理局招标计划', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'03',content:'【麻城市中心】麻城经济开发区谌家园小学及附属幼儿园建设项目招标预公告', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'04',content:'【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'05',content:'【红安县中心】红安县 2023 年度小型水库安全监测项目设计采购施工总承包 (EPC)', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'06',content:'海头镇宅基村土地发包项目', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'07',content:'先锋创业大楼（515-1 室）60㎡', date: '2022-04-13',status:'正在处理中',operation:'查看'},
        {id:'08',content:'万达开绿色智能铸造产业园项目（二期）比选结果公告', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'09',content:'2023 年度工伤基金结算支付智能审核监控项目竞争性磋商公告', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'10',content:'万达开绿色智能铸造产业园项目（三期）比选结果公告', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'11',content:'太原市迎泽区卫生局卫生监督所 2023 年 4 月至 12 月政府采购意向 - 公用经费项目', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'12',content:'侯马市第二中学校 2023 年 4 月至 11 月政府采购意向 - 城乡义务教育补助经费中央资金', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'13',content:'太原市迎泽区卫生局卫生监督所 2023 年 4 月至 12 月政府采购意向 - 公用经费项目', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'14',content:'侯马市第二中学校 2023 年 4 月至 8 月政府采购意向 - 城乡义务教育补助经费中央资金', date: '2022-04-13',status:'处理完成',operation:'查看'},
        {id:'15',content:'【次氯酸钠贮存罐修理】采购公告 附件', date: '2022-04-13',status:'处理完成',operation:'查看'},
    ]);

//四、设置字体颜色 
    const getStatusColor = (status) => {
        if (status === '正在处理中') {
            return '#f28e00';
        } else if (status === '处理完成') {
            return '#000';
        }
    };

</script>

<template>                   
     <el-container style="width: 1200px;margin: auto;background-color: #f8f9f8;padding: 30px;position: relative;">
        <el-main>
            <p style="font-size: 15px;color: #959292;margin-bottom: 30px;">
                <router-link to="/" style="color: #959292;">首页</router-link> /
                <span style="color: black;">违规投诉</span>
                <button class="complaint-button" @click="makeComplaint">去投诉</button>
            </p>
            <!-- 列表 -->
            <div style="padding: 30px 30px 200px 30px;background-color: white;">
                <el-row style="padding:15px 15px 15px 30px;border-bottom: 1px solid #ccc;background-color: #f6fcfc;font-weight: bold;">
                            <el-col :span="2">序号</el-col>
                            <el-col :span="14">动态标题</el-col>
                            <el-col :span="3" style="position: relative;">
                                发布时间<img src="/images/公告列表/u202.png" style="width: 20px;position: absolute;top:2px;">
                            </el-col>
                            <el-col :span="3">处理状态</el-col>
                            <el-col :span="2">操作</el-col>
                </el-row>
                <el-skeleton :rows="4" animated :loading="!articleList.length">
                    <div v-for="item in articleList">
                        <el-row style="padding:15px 15px 15px 30px;border-bottom: 1px solid #ccc;">
                            <el-col :span="2">{{ item.id }}</el-col>
                            <el-col :span="14">{{ item.content }}</el-col>
                            <el-col :span="3">{{ item.date }}</el-col>
                            <el-col :span="3" :style="{ color: getStatusColor(item.status) }">{{ item.status }}</el-col>
                            <el-col :span="2">
                                <router-link to="/ViolationComplaintDetails" style="color: #00b99e;"  @click="Check(item)">{{ item.operation }}</router-link>
                            </el-col>
                        </el-row>
                    </div>
                </el-skeleton>
            </div>

            <!-- 对话框 -->
            <el-dialog v-model="dialogVisible" title="创建投诉" width="700" :close-on-click-modal="false" @close="cancel">
                <div style="display: flex;flex-direction: column;margin:40px 40px;">
                    <el-form label-width="auto" style="max-width: 600px;">
                        <el-form-item label="投诉标题" style="margin-bottom: 20px;" required>
                            <el-input v-model="title" placeholder="请输入投诉标题"/>
                        </el-form-item>
                        <el-form-item label="投诉内容" style="margin-bottom: 20px;" required>
                            <el-input v-model="content" type="textarea" placeholder="请输入投诉内容" rows="5"/>
                        </el-form-item>
                        <el-form-item label="联系人" style="margin-bottom: 20px;" required>
                            <el-input v-model="name"placeholder="请输入联系人"/>
                        </el-form-item>
                        <el-form-item label="联系电话" style="margin-bottom: 20px;" required>
                            <el-input v-model="tel" placeholder="请输入联系电话"/>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button style="width: 60px;" @click="cancel">取消</el-button>
                        <el-button style="width: 60px;" @click="saveComplaint">保存</el-button>
                        <el-button type="primary" @click="onSubmit" style="width: 60px;background: linear-gradient(to right, #7fc87c, #53a091);color:#fff;">提交</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<style scoped>  
/* 一、全局样式 */
    * {
        margin: 0;
        padding: 0;
    }
    /* 修改a标签样式 */
    a{
        text-decoration: none;
        color: black;
    }

/* 二、按钮样式 */
    .complaint-button {
        background: linear-gradient(to right, #7fc87c, #53a091);
        color: white;
        font-size: 17px;
        border: none;
        padding: 10px 40px;
        border-radius: 8px;
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 20px;
    }
 

</style>